<template>
  <div>
<el-container>
  <el-header height='60px'>
    <div class="logo"><img src="http://likede2-admin.itheima.net/img/logo.3673fab5.png" alt=""></div>
    <div class="info">
      <img src="https://lkd2-java.itheima.net/image/avatar.png" alt="">
      <span style="font-size:16px ;color:#fff">欢迎您,{{userName}}</span>
      <div>
      <el-tooltip class="item" effect="dark" content="退出登录" placement="bottom">
      <span style="font-size:16px; color:#fff;marginLeft:30px" class="logout" @click="logout">退出<span class="iconfont icon-xiajiantou"></span></span>
      </el-tooltip>
    </div>
      </div>
  </el-header>
  <el-container>
    <el-aside width="167px">
          <!--aside  -->
      <el-row class="tac">
        <el-col :span="24" >
          <el-menu router  default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">帝可得&nbsp;&nbsp;</span>
        </el-menu-item>
        <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>工单管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="2-1">运营工单</el-menu-item>
          <el-menu-item index="2-2">运维工单</el-menu-item>
        </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
        <template slot="title" >
          <i class="el-icon-location"></i>
          <span>点位管理</span>
        </template>
        <el-menu-item-group router>
          <el-menu-item index="quyu">区域管理</el-menu-item>
          <el-menu-item index="3-2">点位管理</el-menu-item>
          <el-menu-item index="3-3">合作商管理</el-menu-item>
        </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>设备管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="4-1">设备管理</el-menu-item>
          <el-menu-item index="4-2">设备状态</el-menu-item>
          <el-menu-item index="4-3">设备类型管理</el-menu-item>
        </el-menu-item-group>
        </el-submenu>
        <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>人管管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="5-1">人员列表</el-menu-item>
          <el-menu-item index="5-2">人效统计</el-menu-item>
          <el-menu-item index="5-3">工作量列表</el-menu-item>
        </el-menu-item-group>
        </el-submenu>
        <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>商品管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="6-1">商品类型</el-menu-item>
          <el-menu-item index="6-2">商品管理</el-menu-item>

        </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="7">
        <i class="el-icon-menu"></i>
        <span slot="title">策略管理</span>
        </el-menu-item>
        <el-menu-item index="8">
        <i class="el-icon-menu"></i>
        <span slot="title">订单管理</span>
        </el-menu-item>
    </el-menu>
  </el-col>
</el-row>
          <!--aside-->
    </el-aside>
    <el-main>
      <!-- main -->
        <el-row :gutter="20">
            <el-col :span="17" style="padding-top:60px">
                <div class="grid-content bg-purple" style="display:flex ;height:26.28vh;">
                      <!-- 第一层左边 -->
                    <div class="first-1" style="box-sizing:border-box;padding:20px ;height:166px; width: 54.35% ;border-radius:20px ;display:flex; flex-direction: column; line-height:20px ">
                          <div class="top" style="display:flex">
                            <p style="-webkit-box-align: center;color: #333;;font-weight: 600;;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;">工单统计</p>
                            <span style="margin-left: 10px;font-size: 12px;font-family: PingFangSC-Regular,PingFang SC;font-weight: 400;color: #999;">时间</span>
                          </div>
                          <div class="mid" style="display:flex ;justify-content:space-between">
                              <div><p class="color1">360</p><span class="color2 ">工单总数(个)</span></div>
                              <div><p class="color1">360</p><span class="color2 ">完成工单(个)</span></div>
                              <div><p class="color1">360</p><span class="color2 ">进行工单(个)</span></div>
                              <div><p class="color1">360</p><span class="color2 ">取消工单(个)</span></div>
                          </div>
                    </div>
                   <!-- 第一层右边 -->
                    <div class="first-2 " style="box-sizing:border-box;padding:20px;height:166px; ; width:45.65%;margin-left:20px;border-radius:20px;display:flex; flex-direction: column; line-height:20px">
                         <div class="top" style="display:flex">
                                <p style="-webkit-box-align: center;color: #333;;font-weight: 600;;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;">销售统计</p>
                                <span style="margin-left: 10px;font-size: 12px;font-family: PingFangSC-Regular,PingFang SC;font-weight: 400;color: #999;">时间</span>
                         </div>
                          <div class="mid" style="display:flex ;justify-content:space-around">
                              <div><p class="color3">360</p><span class="color4 ">订单量(个)</span></div>
                              <div><p class="color3">360</p><span class="color4 ">销售额(万元)</span></div>
                          </div>
                    </div>
                </div>
                <br>
                <br>
                <br>
                <br>
                <div class="grid-content bg-purple" style="display:flex;height:352px;background-Color:green; margin-top:20px">
                    <div style="background-Color:red ;height:26.28vh; width: 76.23vw">第二层</div>
                </div>
            </el-col>
<!-- 右侧热门商品 -->
            <el-col :span="7"  style="padding-top:60px">
                <div class="grid-content bg-purple first-3" style="height:900px ;padding:20px" >
                  <!-- 热门标题 -->
                  <div class="hot" style="display:flex ;line-height:20px">
                            <p style="-webkit-box-align: center;color: #333;;font-weight: 600;;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;">商品热榜</p>
                            <span style="margin-left: 10px;font-size: 12px;font-family: PingFangSC-Regular,PingFang SC;font-weight: 400;color: #999;">时间</span>
                  </div>
                  <!-- 热门内容 -->
                  <div class="hot-content">
                       <div class="hot-item">
                         <span class="hot-text hot-text-icon">1</span>
                         <span class="hot-text">怡宝</span>
                         <span class="hot-text">937单</span>
                       </div>
                       <div class="hot-item">
                         <span class="hot-text hot-text-icon">1</span>
                         <span class="hot-text">怡宝</span>
                         <span class="hot-text">937单</span>
                       </div>
                  </div>

                </div>
            </el-col>
      </el-row>
      <!-- main -->
    </el-main>
  </el-container>
</el-container>

  </div>
</template>

<script>
import { getuserId } from '@/utils/localStorage'
import { userinfo } from '@/api/login'
export default {
  async created () {
    const { data } = await userinfo(getuserId())
    console.log(data.userName)
    this.userName = data.userName
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    logout () {
      console.log('退出登录')
      this.$router.push('/login')
    }
  },
  data () {
    return {
      userName: ''
    }
  }
}

</script>

<style lang='less' scoped>

.el-header{
  background-image: url();
  display: flex;
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  > .info{
    display: flex;
     align-items: center;
     position: absolute;
      right: 30px;
      img{
      width: 35px;
      height: 35px;
      }
      .logout:hover{
        cursor: pointer;
      }
  }
  >.logo{
    position: absolute;
    left: 20px;
    top: 10px;
     width: 90px;
   img{
     width: 90px;
   }
  }
}
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside::-webkit-scrollbar { width: 0 !important }
  .el-aside {
    padding-top: 65px;
    height: 100vh;
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 200px;
    .el-submenu__title{
      width: 300px;
    }
    >.el-menu-item {
      margin-left: -40px;
      font-size:14px;
    }
    >.el-submenu{
      margin-left: -40px;
      font-size:14px;
    }
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
    .mid{
      margin-top: 30px;

      .color1{
        text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
        color: #072074;
        height: 50px;
        font-size: 36px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        line-height: 50px;
      }
      .color2{
       color: #91a7dc;
       font-size:12px ;
      }
      .color3{
        text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);;
        color: #ff5757;;
        height: 50px;
        font-size: 36px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        line-height: 50px;
      }
      .color4{
       color: #de9690;;
       font-size:12px ;
      }
    }
    .first-1{
    background: #dce9f9;
    background-Image:url(),url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
    background-repeat: no-repeat;
    background-position: 0 0,calc(100% - 12px) 100%;
    }
    .first-2{
    background-color: #fbefe8;
    background: #e9f3ff;
    background: #fbefe8 url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat calc(100% - 12px) 100%;
    background-repeat: no-repeat;
    background-position: 260 52,calc(100% - 12px) 100%;
    }
    .first-3{
        flex-direction: column;
        height: calc(60vh - 72px);
        min-height: 538px;
        background: #fff;
        border-radius: 20px;
        .hot-content{
          // display: flex;
          // flex-direction: column;
          // align-content: space-between;

          .hot-item{
            display: flex;
            justify-content: space-between;
            width: 100%px;
            height: 24px;
            background-color: rgb(255, 255, 255);
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Medium,PingFang SC;
            font-weight: 500;
            color: #333;
            line-height: 20px;
            overflow: hidden;
            // white-space: nowrap;
            // text-overflow: ellipsis;
            margin-top: 20px;

          }
        }
    }
  }

  body > .el-container {
    position: relative;
    margin-bottom: 40px;
  }
</style>
